﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>css3 - Test</title>
    <link href="skin/css3.css" rel="stylesheet" />
    <script src="Js/jquery-1.8.3.js"></script>
</head>
<body>
    <div class="clock">
        <div class="imgs"></div>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        setInterval(function () {
            $('.point').remove();
            var time = new Date();
            var s = (time.getSeconds()-15)*6;
            var m = (time.getMinutes()-15)*6;
            var h = ((time.getHours()%12)-3)*30;
            setPoint(250, 250, 100, 10, "gray", h); //时
            setPoint(250, 250, 170, 8, "black", m);//分
            setPoint(250, 250, 200, 5, "red", s);//秒
        }, 1000);
        for (var i = 0; i < 60; i++) {
            var div;
            if (i % 5 == 0) {
                div = '<div style="width:8px;height:20px;-ms-transform:rotate(' + i * 6 + 'deg);transform:rotate(' + i * 6 +
                    'deg);transform-origin:0px 250px 0px;-webkit-transform-origin:0px 250px 0px;-ms-transform-origin:0px 250px;-webkit-transform: rotate(' +
                    i * 6 + 'deg); background-color:black;position: absolute;top:0;left:250px;-o-transform-origin:0px 250px;"></div>';
            } else {
                div = '<div style="width:4px;height:10px;-o-transform-origin:0px 250px 0px;-ms-transform:rotate(' + i * 6 + 'deg);transform:rotate(' + i * 6 +
                    'deg);transform-origin:0px 250px 0px;-webkit-transform-origin:0px 250px 0px;-ms-transform-origin:0px 250px; -webkit-transform: rotate(' +
                    i * 6 + 'deg); background-color:black;position: absolute;top:0;left:250px;-o-transform-origin:0px 250px;"></div>';
            }
            $('.clock').append(div);
        };


        function setPoint(startx, starty, length, width, color, angle) {
            var div = '<div class="point" style="border-radius:5px;position:absolute;width:' + length + 'px;height:' + width +
                'px;left:' + startx + 'px;top:' + starty + 'px;background-color:' + color + ';transform:rotate(' + angle + 'deg);-ms-transform:rotate(' + angle + 'deg);-webkit-transform: rotate(' + angle + 'deg);transform-origin:0px 4px 0px;-webkit-transform-origin:0px 4px 0px;-o-transform-origin:0px 4px;-ms-transform-origin:0px 4px;"></div>';
            $('.clock').append(div);
        }

    });
</script>
</html>
